<template>
    <div>
        <!--    面包屑导航    -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <!--    卡片区域    -->
        <el-card>
            <!--    添加按钮    -->
            <el-row>
                <el-col>
                    <el-button type="primary" @click="addGoodsClick">添加分类</el-button>
                </el-col>
            </el-row>

            <tree-table
                    class="treeTable"
                    :data="cateList"
                    :columns="columns"
                    :stripe="true"
                    :selection-type="false"
                    :expand-type="false"
                    :show-index="true"
                    :border="true"
            >
                <template #isok="scope">
                    <i :style="{'color': !scope.row.cat_deleted ? 'yellowgreen':'red'}"
                       :class="[!scope.row.cat_deleted ? 'el-icon-success' : 'el-icon-error']">
                    </i>
                </template>
                <template #sort="scope">
                    <el-tag :type="tagType(scope.row.cat_level)">{{scope.row.cat_level | numToCast}}级</el-tag>
                </template>
                <template #edit="scope">
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="editClick(scope.row.cat_id)">编辑
                    </el-button>
                    <el-popconfirm
                            placement="top"
                            confirmButtonText='好的'
                            cancelButtonText='不用了'
                            @onConfirm="deleteClick(scope.row.cat_id)"
                            icon="el-icon-info"
                            iconColor="red"
                            :title="`确定删除 【${scope.row.cat_name}】 吗？`">
                        <el-button style="margin-right: 10px" size="mini" type="danger" slot="reference"
                                   icon="el-icon-delete">
                            删除
                        </el-button>
                    </el-popconfirm>
                </template>
            </tree-table>
            <!--    分页数据    -->
            <el-pagination
                    :page-sizes="[3,5,10,20]"
                    :page-size="queryInfo.pagesize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pagenum"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            >

            </el-pagination>
        </el-card>
        <el-dialog title="添加分类" :visible.sync="dialogFormVisible" width="35%" :close-on-click-modal="false"
                   @close="closeDialog('addCateForm')">
            <el-form :model="addCateForm" :rules="cateFormRule" status-icon ref="addCateForm">
                <!-- prop绑定的表单验证对应的属性 -->
                <el-form-item label="分类名称" label-width="13%" prop="cat_name">
                    <el-input v-model="addCateForm.cat_name" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="父级分类" label-width="13%">
                    <!-- options指定数据源 -->
                    <!-- props指定配置对象 -->
                    <!-- v-model 选中某个节点之后，会把该数组以数组的形式来保存， 所以绑定的必须是一个数组 -->
                    <el-cascader
                            class="cascader"
                            v-model="selectKeys"
                            :options="parentCategoryList"
                            :props="cateProps"
                            :clearable="true"
                            @change="parentChange">
                    </el-cascader>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addClick">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import $axios from '../../network/request';

    export default {
        name: "Category",
        data() {
            return {
                // 查询条件
                queryInfo: {
                    type: 3,
                    pagenum: 1,
                    pagesize: 5,
                },
                //商品数据
                cateList: [],
                //商品总数量
                total: 0,
                columns: [
                    {
                        label: '分类名称',
                        prop: 'cat_name',
                        width: '400px',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        label: '是否有效',
                        prop: 'cat_deleted',
                        align: 'center',
                        headerAlign: 'center',
                        //表示将当前页定义成一个自定义末模板页面
                        type: 'template',
                        //表示将当前使用自定义的模板名称
                        template: 'isok',
                    },
                    {
                        label: '排序',
                        prop: 'cat_level',
                        align: 'center',
                        headerAlign: 'center',
                        //表示将当前页定义成一个自定义末模板页面
                        type: 'template',
                        //表示将当前使用自定义的模板名称
                        template: 'sort',
                    },
                    {
                        label: '编辑',
                        align: 'center',
                        headerAlign: 'center',
                        //表示将当前页定义成一个自定义末模板页面
                        type: 'template',
                        //表示将当前使用自定义的模板名称
                        template: 'edit',
                    },
                ],
                addCateForm: {
                    //父类ID默认是0，一级
                    cat_pid: 0,
                    cat_name: '',
                    //分类的等级默认是一级
                    cat_level: 0
                },
                cateFormRule: {
                    cat_name: [
                        {required: true, message: '请输入分类名称', trigger: 'blur'},
                        {min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur'}
                    ],
                },
                dialogFormVisible: false,
                parentCategoryList: [],
                cateProps: {
                    //是否支持任意节点选中
                    checkStrictly: true,
                    expandTrigger: 'hover',
                    //指定看到的属性  例如 类型名称  是我们所看到的
                    label: 'cat_name',
                    //指定具体选中的属性值  例如 类型ID  是选中类型名称后对应的ID
                    value: 'cat_id',
                    //指定父子嵌套的属性
                    children: 'children',
                },
                //选中父级分类的ID数组
                selectKeys: [],
            }
        },
        computed: {
            is_loading() {
                return this.$store.state.is_loading
            },
            tagType() {
                return function (level) {
                    switch (level + '') {
                        case '0':
                            return 'primary'
                        case '1':
                            return 'success'
                        default:
                            return 'warning'
                    }
                }
            }
        },
        filters: {
            numToCast(level) {
                switch (level + '') {
                    case '0':
                        return '一'
                    case '1':
                        return '二'
                    default:
                        return '三'
                }
            }
        },
        methods: {
            init() {
                $axios({
                    method: 'get',
                    url: '/categories',
                    params: this.queryInfo
                }).then(res => {
                    if (res.data.meta.status !== 200) {
                        this.$message.error("获取商品分类失败")
                    } else {
                        //商品列表赋值
                        this.cateList = res.data.data.result
                        this.total = res.data.data.total
                    }
                })
            },
            // pageSize修改事件
            handleSizeChange(newSize) {
                this.queryInfo.pagesize = newSize;
                this.init()
            },
            // 翻页事件
            handleCurrentChange(newPageNum) {
                this.queryInfo.pagenum = newPageNum;
                this.init()
            },
            //编辑按钮时间
            editClick(id) {
                alert(id)
            },
            deleteClick(id) {
                $axios({
                    method: 'delete',
                    url: `categories/${id}`,
                }).then(res => {
                    if (res.data.meta.status !== 200) {
                        return this.$message.error("删除失败")
                    }
                    this.$message.success("删除成功")
                    this.init();
                })
            },
            //关闭弹窗按钮事件
            closeDialog(refName) {
                this.$refs[refName].resetFields()
                this.selectKeys = []
                this.addCateForm.cat_pid = 0
                this.addCateForm.cat_level = 0
            },
            //确定添加按钮事件
            addClick() {
                this.$refs.addCateForm.validate(valid => {
                    if (valid) {
                        $axios({
                            method: 'post',
                            url: '/categories',
                            data: this.addCateForm
                        }).then(res => {
                            if (res.data.meta.status !== 201) {
                                return this.$message.error("添加数据异常")
                            } else {
                                this.$message.success("添加成功")
                                this.init();
                                this.dialogFormVisible = false
                            }
                        })
                    }
                })
            },
            //添加按钮事件
            addGoodsClick() {
                this.dialogFormVisible = true
                this.getCategoryList()
            },
            //获取所有的分类
            async getCategoryList() {
                const {data: res} = await $axios({
                    url: '/categories',
                    params: {
                        'type': 2
                    }
                })
                if (res.meta.status !== 200) {
                    return this.$message.error("请求数据异常")
                }
                this.parentCategoryList = res.data
            },
            //级联选择器发生修改的事件
            parentChange() {
                //逻辑判断：因为级联选择器如果被清空的话，那么数组也为空。不符合要求，要让其默认为0，表示一级菜单。
                if (this.selectKeys.length > 0) {
                    //永远使用选中数组的最后一位最为父ID传参
                    this.addCateForm.cat_pid = this.selectKeys[this.selectKeys.length - 1]
                    //为当前分类的等级赋值
                    this.addCateForm.cat_level = this.selectKeys.length
                } else {
                    this.addCateForm.cat_pid = 0
                    this.addCateForm.cat_level = 0
                }
            }
        },
        created() {
            this.init()
        }
    }
</script>

<style scoped>
    .treeTable {
        margin-top: 20px;
    }

    .cascader {
        width: 100%;
    }
</style>
